<template>
  <div class="sidebar1" >
    <template v-for="item in layoutData" >
        <div @click="getFunctional(item)" :key="item.id" v-if="item.id" class="menu-item2">
            <el-menu-item
            v-if="!item.permissionRespChildList || item.permissionRespChildList ==null || item.permissionRespChildList.length == 0"
            :index="item.id">
            <i :class="item.icon"></i>
            <span>{{item.name}}</span>
          </el-menu-item>
        </div>
        <el-menu-item-group v-if="item.permissionRespChildList && item.permissionRespChildList.length !== 0" :key="item.id" :index="item.id ? item.id : item.name" title="分组2">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>{{item.name}}</span>
        </template>
        
         <div style="display:flex;flex-wrap:wrap">
          <Menu :layoutData="item.permissionRespChildList" />
         </div>
      <!-- </el-submenu> -->
      </el-menu-item-group>
    </template>
  </div>
</template>

<script>
// import bus from '../common/bus';
// @ is an alias to /src
export default {
  name: "Menu",
 props: {
    layoutData: Array
  },
  data() {
    return {
      collWidth: '',
    };
  },
  computed: {
			// layoutData() {
			//     return this.$store.getters.layoutData;
			// },
		},
  methods: {
     getFunctional(item){
      if(this.$route.path!==item.url)
       this.$store.commit('setactivePath',item.url)
		    this.$router.push(item.url)
	  }
  },
  created(){
    this.collWidth = this.$store.getters.ismOrpc ? 'width:180px': 'width:300px'
  }
 
};
</script>
<style >

.el-submenu__title {
    background: #e7e7e8;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 72px;
}
</style>
